<template>
    <component :is="ComponentName" :pname="pname" :pvalue="pvalue"></component>
</template>

<script lang="ts">
import _ from "lodash";
import { Component, Prop, Vue } from "vue-property-decorator";
// import NumberNode from "./NumberNode.vue";
// import StringNode from "./StringNode.vue";
// import StructNode from "./StructNode.vue";
// import ArrayNode from "./ArrayNode.vue";

@Component({
    components: {
        NumberNode: () => import("./NumberNode.vue"),
        StringNode: () => import("./StringNode.vue"),
        StructNode: () => import("./StructNode.vue"),
        ArrayNode: () => import("./ArrayNode.vue")
    }
})
export default class NodeSwitch extends Vue {
    @Prop() public pname!: string;
    @Prop() public pvalue!: any;

    created() {}

    public get ComponentName() {
        if (_.isString(this.pvalue)) {
            return "string-node";
        } else if (_.isNumber(this.pvalue)) {
            return "number-node";
        } else if (_.isArray(this.pvalue)) {
            return "array-node";
        } else if (_.isObject(this.pvalue)) {
            return "struct-node";
        } else {
            return "struct-node";
        }
    }
}
</script>